<!DOCTYPE html>
<html lang="en">
  <head>
    <title>防诈预警 - 剧安鑫官网</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="icon" type="image/png" href="../icon.png" />
    <script src="../assets/js/vue.js"></script>
    <script src="../assets/js/axios.min.js"></script>
    <link rel="stylesheet" href="../assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/css/flaticon.css">
    <link rel="stylesheet" href="../assets/css/tiny-slider.css">
    <link rel="stylesheet" href="../assets/css/style.css">
  </head>
  <body id="app">
    <nav class="navbar navbar-expand-lg  ftco-navbar-light">
      <div class="container-xl">
        <a class="navbar-brand" href="../index.html">
          <img src="../assets/images/logo.png" style="margin-bottom: 3px;width: 32px;vertical-align:top;"/>
          剧安鑫
          <span>剧组管理一站式解决方案</span>
        </a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="../index.html">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="../index.html?#kernel">核心业务</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="../taxation/list.html">税务知识</a>
            </li>
            <li class="nav-item">
              <a class="nav-link active" href="../notice/list.html">防诈预警</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="../index.html?#goods">剧组商城</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="../index.html?#contact">联系我们</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <section class="hero-wrap hero-wrap-2" style="background-image: url('../assets/images/bg_3.jpg');">
    </section>

    <section class="ftco-section">
      <div class="container">
        <div class="row g-lg-5">
          <div class="col-lg-8">
            <div class="row justify-content-center">
              <div class="col-md-12" v-for="(index, item) in list" :key="index">
                <div class="blog-entry d-flex justify-content-end" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100">
                  <a :href="'detail.html?id='+item.id" class="block-20 img" :style="{ backgroundImage: 'url('+item.picture+')' }">
                  </a>
                  <div class="text">
                    <h3 class="heading mb-3">
                      <a :href="'detail.html?id='+item.id">{{ item.title }}</a>
                    </h3>
                    <p>{{ item.description }}</p>
                    <a :href="'detail.html?id='+item.id" class="btn btn-primary">
                      查看详情
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="row mt-5">
              <div class="col text-center">
                <div class="block-27">
                  <ul>
                    <li>
                      <a :href="'list.html?page='+from">&lt;</a>
                    </li>
                    <li v-for="index in total" :key="index">
                      <a :class="page == index + 1 ? 'active' : ''" :href="'list.html?page='+(index + 1)">{{ index + 1 }}</a>
                    </li>
                    <li>
                      <a :href="'list.html?page='+to">&gt;</a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4 sidebar pl-md-4">
            <div class="sidebar-box">
              <h3>相关知识</h3>
              <div class="block-21 mb-4 d-flex" v-for="(index, item) in related" :key="index">
                <a class="blog-img me-4" :href="'detail.html?id='+item.id" :style="{ backgroundImage: 'url('+item.picture+')' }"></a>
                <div class="text">
                  <h3 class="heading mb-3">
                    <a :href="'detail.html?id='+item.id">
                      {{ item.title }}
                    </a>
                  </h3>
                  <p>
                    {{ item.create_time }}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <footer id="contact" class="ftco-footer">
      <div class="overlay"></div>
      <div class="container-xl">
        <div class="row justify-content-between">
          <div class="col-md-8 col-lg">
            <div class="ftco-footer-widget mb-4">
              <h2 class="ftco-heading-2 logo d-flex">
                <a class="navbar-brand">
                  Contact Us
                  <span>联系我们</span>
                </a>
              </h2>
              <div class="bottom">
                <div class="">联系方式</div>
                <div class="">张立：13683109660</div>
              </div>
            </div>
          </div>
          <div class="col-md-8 col-lg">
            <div class="ftco-footer-widget mb-4">
              <div class="top"><img src="../assets/images/qrcode/1.jpg"/></div>
              <div class="bottom">
                <div class="">投诉通道</div>
                <div class="">ISC@360.cn 互联网安全大全</div>
              </div>
            </div>
          </div>
          <div class="col-md-8 col-lg">
            <div class="ftco-footer-widget mb-4">
              <div class="top"><img src="../assets/images/qrcode/2.jpg"/></div>
              <div class="bottom">
                <div class="">京ICP证080268号 ©2025网易公司</div>
                <div class="">免责声明及投诉指引《ISC用户服务协议》</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>

    <script>
      new Vue({
        el: '#app',
        data() {
          return {
            page: 1,
            from: 0,
            to: 0,
            total: 0,
            list: [],
            related: [],
          }
        },
        methods: {
          getArticleList() {
            let url = 'https://api.tvjcb.com/api/business/article/list'
            axios.get(url, {
              params: { category_id: 4, page: this.page }
            }).then(res => {
              if(res.data && res.data.data) {
                this.list = res.data.data.data;
                this.from = res.data.data.current_page == 1 ? 1 : res.data.data.current_page - 1;
                this.to = res.data.data.current_page == res.data.data.last_page ? res.data.data.last_page : res.data.data.current_page + 1;
                this.total = res.data.data.last_page;
              }
            });
          },
          getRelatedList() {
            let url = 'https://api.tvjcb.com/api/business/article/related'
            axios.get(url, {
              params: { category_id: 4, limit: 4 }
            }).then(res => {
              this.related = res.data.data;
            });
          },
        },
        created() {
          const params = new URLSearchParams(window.location.search);
          const page = params.get('page');
          if(page) {
            this.page = params.get('page');
          }

          this.getArticleList()
          this.getRelatedList()
        }
      });
    </script>
  </body>
</html>
